<template>
  <div class="dialog-demo">
    <el-button type="myBlue" @click="addUser">新增用户</el-button>
    <el-button type="success" @click="fetchData">刷新</el-button>
    <el-table
        v-loading="tableLoading"
        :data="tableData.filter(data => !search||
                 data.userName.toLowerCase().includes(search) ||
                 data.phoneNumber.includes(search.toLowerCase()) ||
                 data.email.toLowerCase().includes(search.toLowerCase())
              )"
        style="width: 80%; margin-top: 20px;">
      <el-table-column label="姓名" prop="userName"/>
      <el-table-column label="手机号码" prop="phoneNumber"/>
      <el-table-column label="邮箱地址" prop="email" width="300"/>

      <el-table-column label="账号冻结" prop="disable" width="150">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.disable"
                     @change="toggleShowUser(scope.row)"
                     :disabled="1 === scope.row.userId || scope.row.permission >= $store.state.user.permission"
                     active-color="#DC143C" active-text="冻结" inactive-text="正常"/>
        </template>
      </el-table-column>

      <el-table-column label="权限类型" prop="permission">
        <template slot-scope="scope">
          <span v-if="4 === scope.row.permission" v-text="'超级管理员'"/>
          <span v-if="3 === scope.row.permission" v-text="'管理员'"/>
          <span v-if="2 === scope.row.permission" v-text="'领导用户'"/>
          <span v-if="1 === scope.row.permission" v-text="'普通用户'"/>
        </template>
      </el-table-column>

      <el-table-column align="right" width="300">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" @click="handleEdit(scope.$index, scope.row)"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini"
                     :disabled="scope.row.permission >= $store.state.user.permission"
                     @click="handleEdit(scope.$index, scope.row)">修改用户信息</el-button>
          <el-button size="mini" type="danger"
                     :disabled="scope.row.permission >= $store.state.user.permission"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <UserInformation v-if="showDialog" ref="userInformation" :dialog-title="dialogTitle" :item-info="tableItem" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import UserInformation from "@/components/Admin/UserInformation";
export default {
  name: "UserManage",
  components: {UserInformation},
  data() {
    return {
      tableLoading: !1,
      showDialog: !1,
      dialogTitle: "添加人员",
      tableData: [],
      tableItem: {
        userId: "",
        permission: "",
        phoneNumber: "",
        disable: "",
        userName: "",
        email: "",
      },
      search: "",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      var t = this,
          e = this;
      (e.tableLoading = !0),
          this.$http.get("/api/user/list").then(function (a) {
            200 === a.data.code &&
            ((t.tableData = a.data.data), (e.tableLoading = !1));
          });
    },
    addUser() {
      var t = this;
      (this.tableItem = {
        userId: "",
        permission: 1,
        phoneNumber: "",
        disable: !1,
        userName: "",
        email: "",
      }),
          (this.dialogTitle = "新增用户"),
          (this.showDialog = !0),
          this.$nextTick(function () {
            t.$refs["userInformation"].showDialog = !0;
          });
    },
    handleEdit(t, e) {
      var a = this;
      (this.tableItem = e),
          (this.dialogTitle = "编辑用户信息"),
          (this.showDialog = !0),
          this.$nextTick(function () {
            a.$refs["userInformation"].showDialog = !0;
          });
    },
    handleDelete(t, e) {
      var a = this;
      this.$confirm(
          "此操作将永久删除该用户（" + e.userName + "）, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(function () {
            a.$http
                .get("api/user/delete?userId=" + e.userId)
                .then(function (t) {
                  200 === t.data.code &&
                  (a.fetchData(),
                      a.$message({type: "success", message: "删除成功!"}));
                });
          })
          .catch(function () {
            a.$message({type: "info", message: "已取消删除"});
          });
    },
    closeDialog(t) {
      t && this.fetchData(), (this.showDialog = !1);
    },
    toggleShowUser(t) {
      t.disable
          ? this.$http
              .get("api/user/disable?userId=" + t.userId)
              .then(function (e) {
                500 === e.data.code && (t.disable = !t.disable);
              })
          : this.$http
              .get("api/user/enable?userId=" + t.userId)
              .then(function (e) {
                500 === e.data.code && (t.disable = !t.disable);
              });
    },
  }
}
</script>

<style scoped>
.dialog-demo {
  padding: 20px;
}

.dialog-demo .instructions {
  font-size: 14px;
  padding: 10px 0;
  color: #304455;
}

.dialog-demo .desc-list {
  padding: 10px 0 30px 40px;
  line-height: 30px;
  font-size: 14px;
  color: #606266;
  list-style-type: disc;
}
</style>
